<!-- 编辑 -->
<template>
  <div class="page-box h100 display-flex czbj au">
    <p class="title-label">编辑</p>
    <div class="kjknsertw">
      <n-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="120"
        :inline="false"
        size="normal"
        label-placement="left"
        class="mt20"
      >
        <n-grid :cols="24" :x-gap="20" :y-gap="20">
          <n-form-item-gi span="24" label="标题:" path="title">
            <n-input
              v-model:value="form.title"
              type="text"
              placeholder="请输入文章标题"
              size="medium"
              clearable
            ></n-input>
          </n-form-item-gi>
          <n-form-item-gi span="24" label="副标题:" path="subheading">
            <n-input
              v-model:value="form.subheading"
              type="textarea"
              placeholder="请输入副标题"
              size="medium"
              clearable
            ></n-input>
          </n-form-item-gi>

          <n-form-item-gi
            span="24"
            label="封面:"
            path="cover"
            v-if="cz.type != 2"
          >
            <div class="kjjjmsertwe" @click="photoShowModal = true">
              <div class="kjjjsertwwx" v-if="form.cover">
                <img :src="form.cover" />
                <i
                  class="iconfont dx-closefill sfdgdgty"
                  @click.stop="form.cover = ''"
                ></i>
              </div>

              <div v-else class="logo-context vertical-center ab">
                <span>点击上传图片</span>
              </div>
            </div>
          </n-form-item-gi>

          <n-form-item-gi span="24" label="详情" path="" class="mt20">
            <div class="fwbclass">
              <tinymce ref="tinymceref"></tinymce>
            </div>
          </n-form-item-gi>
        </n-grid>
      </n-form>
    </div>
    <div class="jkjnjmxertw vertical-center">
      <div>
        <n-button
          type="primary"
          size="medium"
          :loading="loading"
          @click="subform"
          >{{ isBj ? "保存" : "新增" }}</n-button
        >
        <n-button
          type="error"
          size="medium"
          :loading="loading"
          @click="fhsyy"
          class="ml20"
          >返回上一页</n-button
        >
      </div>
    </div>
    <n-modal
      v-model:show="photoShowModal"
      preset="card"
      class="Stock-diagnosis"
    >
      <template #header>
        <div>封面</div>
      </template>
      <div>
        <photoGallery
          @getImg="getImg"
          :types="'undefined' + Userid"
        ></photoGallery>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModal = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="setImg"> 确定 </n-button>
        </div>
      </template>
    </n-modal>
  </div>
</template>
<script lang="ts" setup>
import { ref, nextTick } from "vue";
import {
  dxget,
  dxpost,
  qurl,
  hf,
  transferTimeYMD,
  callBack,
  dialog,
} from "../../util/index";
import photoGallery from "../../components/util/photoGallery";
import tinymce from "../../components/util/tinymce.vue";
import Draggable from "vuedraggable";
const apiurl = "mfh/freakingAwesome";
const cz = qurl();
const loading = ref(false);
const photoShowModal = ref(false);
const isBj = ref();
const tinymceref = ref();
const formRef = ref();
const Userid = ref(localStorage.Userid);
const imgList = ref("");
const provinceoptions = ref();
const cityoptions = ref();
const form = ref({
  title: "",
  subheading: "",
  cover: "",
  details: "",
  type: cz.type,
});
const rules = {
  title: {
    required: true,
    message: "请输入文章标题",
    trigger: "blur",
  },
  subheading: {
    required: true,
    message: "请输入副标题",
    trigger: "blur",
  },
  cover: {
    required: true,
    message: "请输入上传封面",
    trigger: "blur",
  },
};

let jjnmnxe = "";
const getImg = (data) => {
  jjnmnxe = data;
};
const setImg = () => {
  form.value.cover = jjnmnxe;
  photoShowModal.value = false;
};
const closesert = (idx) => {
  imgList.value.splice(idx, 1);
};
const fhsyy = async () => {
  const type = await dialog("确认返回吗?");
  if (type) {
    callBack();
  }
};
const kjnmse = (idx, type) => {
  if (type == 1 && idx > 0) {
    [imgList.value[idx - 1], imgList.value[idx]] = [
      imgList.value[idx],
      imgList.value[idx - 1],
    ];
  }
  console.log(imgList.value.length < idx);
  if (type == 2 && imgList.value.length - 1 > idx) {
    [imgList.value[idx + 1], imgList.value[idx]] = [
      imgList.value[idx],
      imgList.value[idx + 1],
    ];
  }
};
const getprovince = async () => {
  const { data }: any = await dxget("public/area");
  provinceoptions.value = data;
};
const getcity = async (code) => {
  const { data }: any = await dxget("public/area", {
    type: 1,
    code,
  });
  cityoptions.value = data;
};
const jjjjnjsa = (code, b) => {
  form.value.provinceText = b.label;
  form.value.city = "";
  form.value.cityText = "";
  getcity(code);
};
const jjjjnjsb = (code, b) => {
  form.value.cityText = b.label;
};
getprovince();

const subform = () => {
  let apitype = "post";
  if (isBj.value) {
    apitype = "put";
  }
  form.value.details = tinymceref.value.getContent();

  formRef.value?.validate(async (errors) => {
    if (!errors) {
      const { errno }: any = await dxpost(apiurl, form.value, apitype);
      if (errno == 0) {
        callBack();
      }
    }
  });
};

const initData = async () => {
  loading.value = true;
  const { data }: any = await dxget(apiurl, { id: cz.id });
  form.value = data;
  tinymceref.value.setContent(data.details);
  loading.value = false;
};

if (cz.id) {
  isBj.value = true;
  initData();
}
</script>
<style scoped>
.addImwen {
  width: 200px;
  height: 170px;
  background: #e0e0e0;
  font-size: 26px;
  cursor: pointer;
}
.jkknkcxeeet {
  width: 1400px;
  display: grid;
  grid-template-rows: repeat(1, 1fr);
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
.jkjnjmxertw {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 999;
  background: #fff;
  height: 50px;
  width: 100%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.logo-context {
  width: 100%;
}
</style>
